<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>排版样式</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
</head>
<body style="margin:50px">

<br/>基本表单 class="form-control" 横向占满 <br/>
<form >
	
		<label class="col-sm-2 control-label">电子邮件</label>
		
			<input type="email" class="form-control" placeholder="请输入您的电子邮件">
		

	
		<label class="col-sm-2 control-label">密码</label>
		
			<input type="password" class="form-control" placeholder="请输入您的密码">	
		

</form>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<br/>基本表单 class="form-control" 横向占满 class="form-group"群组  class="form-inline"名字和输入狂在一行上<br/>

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label">电子邮件</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" placeholder="请输入您的电子邮件">
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">密码</label>
		<div class="col-sm-10">
			<input type="password" class="form-control " placeholder="请输入您的密码">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">时间</label>
		<div class="col-sm-10">
			<input type="datetime" class="form-control " placeholder="时间格式 火狐不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">时间</label>
		<div class="col-sm-10">
			<input type="datetime-local" class="form-control " placeholder="时间格式 火狐不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">日期</label>
		<div class="col-sm-10">
			<input type="date" class="form-control " placeholder="时间格式 火狐不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">数字</label>
		<div class="col-sm-10">
			<input type="number" class="form-control " placeholder="部分浏览器不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control " placeholder="部分浏览器不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">url</label>
		<div class="col-sm-10">
			<input type="url" class="form-control " placeholder="部分浏览器不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">查找</label>
		<div class="col-sm-10">
			<input type="search" class="form-control " placeholder="部分浏览器不支持">	
		</div>
	</div>

<div class="form-group">
		<label class="col-sm-2 control-label">电话</label>
		<div class="col-sm-10">
			<input type="tel" class="form-control " placeholder="部分浏览器不支持">	
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label">颜色</label>
		<div class="col-sm-10">
			<input type="color" class="form-control " placeholder="部分浏览器不支持">	
		</div>
	</div>





</form>
<p><span style="color:red">注:</span>电子邮件和密码之间有空隙，是form-group造成的，上面利用了栅格系统，项目和所填项是水平排列的</p>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<br/>人民币符号 后面加.00  glyphicon-ok加对钩 要配合has-feedback<br/>

<form>
	
	<div class="form-group has-success has-feedback">
		<label class="control-label">电子邮件</label>
		<input type="email" class="form-control" placeholder="请输入您的电子邮件">	
		<span class="glyphicon glyphicon-ok form-control-feedback"></span>
	</div>



<div class="form-group has-success has-feedback">
		<label class="control-label">电子邮件</label>
		<input type="email" class="form-control" placeholder="请输入您的电子邮件">	
		<span class="glyphicon glyphicon-remove form-control-feedback"></span>
	</div>



	<div class="form-group">
		<label>密码</label>
		<input type="password" class="form-control input-sm" placeholder="请输入您的密码">	
	</div>

	<div class="input-group">
		<div class="input-group-addon">￥</div>
		<input type="text" class="form-control" placeholder="请输入您的价格">
		<div class="input-group-addon">.00</div>
	</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />


<br/>复选<br/>

	<div class="checkbox">
		<label>
			<input type="checkbox">体育
		</label>
	</div>

	<div class="checkbox disabled">
		<label>
			<input type="checkbox" disabled>音乐
		</label>
	</div>

<p><span style="color:red">注:</span>加lable是为了“体育”这两个汉字也能被点</p>
<br/>复选 内连在一行显示<br/>
	<label class="checkbox-inline">
		<input type="checkbox">体育
	</label>
	<label class="checkbox-inline disabled">
		<input type="checkbox" disabled>音乐
	</label>
	
	<br/>单选<br/>
	<label class="radio-inline disabled">
		<input type="radio" disabled>男
	</label>
	
<br/>设置下拉列表<br/>
	<select class="form-control">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>

</form>

<br/>圆角图片<br/>
<img src="__ROOT__/static/note/img/7.jpg" alt="图片" class="img-rounded"> 

<img src="__ROOT__/static/note/img/7.jpg" alt="图片" class="img-circle">






<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>